<template>
   <div>
      <template>
      <span>{{$route.meta.firstTitle}}</span>&gt;
      <span>{{$route.meta.secondTitle}}</span>
    </template>
   <div>
      <div>
        <span>姓名:</span>
        <input type="text" v-model="student.name">
      </div>
      <div>
        <span>年龄:</span>
         <input type="text" v-model="student.age">
      </div>
      <div>
        <span>性别:</span>
        <input type="radio" name="sex" value="男" v-model="student.gender">男
        <input type="radio" name="sex" value="女" v-model="student.gender">女
      </div>
      <div>
        <span>专业:</span>
        <select v-model="student.subjectsId">
            <option value="-1">--请选择专业--</option>
            <option v-for="item in subjects" :key="item._id" :value="item._id">{{item.name}}</option>
        </select>
      </div>
      <div>
         <span>班级:</span>
         <select v-model="student.classesId">
            <option v-for="item in classes" :key="item._id" :value="item._id">{{item.name}}</option>
         </select>
      </div>
      <div>
        <img :src="student.imagePath" alt="" :style="{width:'100px',height:'100px',borderRadius:'50%'}">
      </div>
      <div>
        <input type="file" @change="uploadAvatar()" ref="avatarElement">
      </div>
      <div>
         <input type="hidden" v-model="student._id">
      </div>
      <div>
        <button @click="updateStudentApi">修改</button>
      </div>
   </div>
   </div>
</template>

<script>
import axios from 'axios'
export default {
    props:['id'],
    data(){
        return{
            student:{},
            subjects:[],
            classes:[]
        }
    },
    methods:{
        async getStudentById(){
             const {data}=await this.$api.students.getStudentsById(this.id)
             this.student=data
        },
        async getAllSubjects(){
            const {data:{result}}=await this.$api.subjects.getSubjects()
            this.subjects=result
        },
        async getClassesBySubjectsId(){
            const {data}=await this.$api.students.getStudentsById(this.id)
            const {data:{result}}=await this.$api.classes.getClassesBySubjectsId(data.subjectsId)
            this.classes=result
        },
        async uploadAvatar(){
            //创建formData对象
            let fd=new FormData()
            fd.append("file",this.$refs.avatarElement.files[0])
            const {data}=await axios.post('http://47.98.128.191:3000/images/uploadImages',fd,{
                headers:{
                    'Content-Type':'multipart-form/data'
                }
            })
            console.log(data[0]);
            this.student.imagePath=data[0]
        },
        async updateStudentApi(){
            console.log(this.student);
            const {code,message}=await this.$api.students.updateStudents(this.student)
            if(code){
                alert(message)
                this.$router.push({
                    path:'/home/studentsList'
                })
            }
        }
    },
    watch:{
       async "student.subjectsId"(newval){
          const {data:{result}}=await this.$api.classes.getClassesBySubjectsId(newval)
          console.log(result);
          this.classes=result
       } 
    },
    created(){
        this.getStudentById()
        this.getAllSubjects()
        this.getClassesBySubjectsId()
    }
}
</script>

<style>

</style>